<template>
    <div>
        <el-form ref="updateForm" label-position="top" :model="updateForm" class="updateForm-container" label-width="120px">
            <el-form-item label="执行内容" prop="rule">
<!--                <div class="input-div" contenteditable="true" @blur="toUpdateNode(updateForm.rule)">-->
<!--                    {{updateForm.rule}}-->
<!--                </div>-->
<!--                <el-input type="textarea" v-model="updateForm.rule" :row="3" placeholder="请输入顺序流执行条件" @change="toUpdateNode"></el-input>-->
<!--                <p class="tips">提示提示提示提示</p>-->
                <el-radio-group v-model="updateForm.rule" @change="handleChange">
                    <el-radio class="rule-radio" :label="1">审核通过</el-radio>
                    <el-radio class="rule-radio" :label="2">审核不通过</el-radio>
<!--                    <el-radio class="rule-radio" :label="3">填报完成</el-radio>-->
<!--                    <el-radio class="rule-radio" :label="4">转交</el-radio>-->
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component
export default class AddOperation extends Vue {
    @Prop({ default: {} }) private nodeInfo: any
    @Watch("nodeInfo", { immediate: true })
    changeInfo() {
        const { rule } = this.nodeInfo;
        let value = 0;
        switch (rule) {
            case "${approvedStatus == 1}": // eslint-disable-line
            value = 1;
            break;
            case "${approvedStatus == 2}": // eslint-disable-line
            value = 2;
            break;
            case "${dealType == 1}": // eslint-disable-line
            value = 3;
            break;
            case "${dealType == 2}": // eslint-disable-line
            value = 4;
            break;
        }
        this.updateForm.rule = value;
    }

    updateForm = {
        rule: 0
    }

    handleChange(val: any) {
        let rule = "";
        let name = "";
        switch (val) {
        case 1: // 通过
            rule = "${approvedStatus == 1}"; // eslint-disable-line
            name = "通过";
            break;
        case 2: // 不通过
            rule = "${approvedStatus == 2}"; // eslint-disable-line
            name = "不通过";
            break;
        case 3: // 填报
            rule = "${dealType == 1}"; // eslint-disable-line
            name = "填报";
            break;
        case 4: // 转交
            rule = "${dealType == 2}"; // eslint-disable-line
            name = "转交";
            break;
        }
        this.$emit("updateNode", { type: "connectLine", data: { rule, name } });
    }
}
</script>

<style lang="scss" scoped>
.updateForm-container {
    margin-top: 56px;
    .input-div {
        border: 1px solid #C0C4CC;
        border-radius: 4px;
        outline: none;
        font-size: 14px;
        line-height: 22px;
        padding: 5px 15px;
        min-height: 66px;
        width: 200px;
    }
    .rule-radio {
        display: block;
        font-size: 16px;
        line-height: 32px;
    }
}
.tips {
    margin: 0;
    line-height: 1.5;
    color: #909497;
}
</style>
